<template>
  <div class="dashboard-container">
    <div class="dashboard-text">
      <el-card>
        <el-row type="flex" justify="space-between">
          <el-col>
            <el-button type="primary" @click="addDialog">添加客户</el-button>
          </el-col>
          <el-col>
            <el-row type="flex" justify="end" align="middle">
              <el-select v-model="agent_contains" placeholder="请选择" @change="changefn">
                <el-option
                  value=""
                  label="全部经纪人"
                />
                <el-option
                  v-for="item in agentList"
                  :key="item.id"
                  :value="item.id"
                  :label="item.name"
                />
              </el-select>
              <el-input v-model="name_contains" placeholder="请输入关键字" />
              <el-button style="height:40px;" @click="screenClients">筛选</el-button>
            </el-row>
          </el-col>
        </el-row>
        <el-row>
          <el-divider />
        </el-row>
        <!-- table -->
        <el-row>
          <el-table
            :data="clientsList"
            border
            style="width: 100%"
            height="calc(100vh - 250px)"
          >
            <el-table-column
              prop="image"
              label="图片"
              width="200"
            >
              <template #default="{row}">
                <el-row type="flex" justify="center">
                  <img :src="row.image" alt="" class="img">
                </el-row>
              </template>
            </el-table-column>
            <el-table-column
              prop="name"
              label="名称"
              width="100"
            />
            <el-table-column
              prop="email"
              label="邮箱"
            />
            <el-table-column
              prop="phone"
              label="电话"
            />
            <el-table-column
              prop="agent.name"
              label="经纪"
              width="150"
            />
            <el-table-column
              prop="wechat"
              label="微信"
            />
            <el-table-column
              prop="desc"
              label="介绍"
            />
            <el-table-column label="操作">
              <template #default="{row}">
                <el-row type="flex" justify="center">
                  <el-button type="primary" @click="editFn(row.id)">编辑</el-button>
                  <el-button type="danger" @click="delFn(row.id)">删除</el-button>
                </el-row>
              </template>
            </el-table-column>
          </el-table>
        </el-row>
        <el-row type="flex" justify="center" style="margin-top:10px">
          <!-- 分页 -->
          <pagination ref="pagination" :obj="obj" :total="total" @currentChange="currentChang" @sizeChange="sizeChang" />
        </el-row>
      </el-card>
      <Dialog ref="Dialog" :show-dialog.sync="showDialog" @dialogData="dialogDat(arguments)" />

    </div>
  </div>
</template>

<script>
// import { mapGetters } from 'vuex'
import Dialog from './dialog'
import { getClients, delClients, getPersonalClients, getClientsCount } from '@/api/customer'
import { getAgent } from '@/api/agent'
export default {
  components: { Dialog },
  data() {
    return {
      obj: { _limit: 2, _start: 0, agent_contains: '', name_contains: '' },
      name_contains: '',
      agent_contains: '',
      agentList: [],
      clientsList: [],
      showDialog: false,
      total: 0
    }
  },
  async created() {
    this.getClients()
    const res = await getAgent() // 经纪人列表
    this.agentList = res.data
  },
  methods: {
    // 子组件更新/新增后通知更新
    dialogDat(msg) {
      // searchMixin() 混入方法
      const arr = this.searchMixin(this.obj.agent_contains, this.obj.name_contains, msg)
      this.obj.agent_contains = arr[0]
      this.obj.name_contains = arr[1]
      this.showDialog = false
      this.getClients()
    },
    async getClients() {
      const res = await getClients(this.obj)
      // console.log(res)
      this.clientsList = res.data
      // 获取总条数 , 实现分页
      const { data } = await getClientsCount()
      const res2 = await getClients({ ...this.obj, _limit: data, _start: 0 })
      this.total = res2.data.length
    },
    addDialog() {
      this.showDialog = true
    },
    // 筛选
    screenClients() {
      // 归零
      this.obj._start = 0
      this.obj.name_contains = this.name_contains
      this.obj.agent_contains = this.agent_contains
      this.$refs.pagination.currentPage = 1
      // this.obj = { agent_contains: this.agentId, name_contains: this.name_contains }
      this.getClients()
    },
    changefn(val) {
      console.log('id', val)
      this.obj.agent_contains = val
    },
    async delFn(id) {
      try {
        await this.$confirm('确认删除吗?')
        await delClients(id)
        if (this.clientsList.length === 1 && this.$refs.pagination.currentPage !== 1) {
          this.obj._start = this.obj._start - this.obj._limit
          setTimeout(() => {
            this.$refs.pagination.currentPage--
          }, 200)
        }
        this.$message.success('删除成功')
        this.getClients()
      } catch (err) {
        console.log(err)
      }
    },
    // 回显
    async editFn(id) {
      const res = await getPersonalClients(id)
      console.log(res.data)
      this.showDialog = true
      this.$refs.Dialog.formData = { ...res.data, agent: res.data.agent.id }
      // 图片回显
      setTimeout(() => {
        this.$refs.Dialog.$refs.image.fileList = [{
          url: res.data.image,
          status: 'success'
        }]
      }, 100)
    },
    // // 分页点击
    // currentChange(index) {
    //   // console.log(1, index)
    //   this.obj._start = (index - this.currentPage) * this.obj._limit + this.obj._start
    //   this.currentPage = index
    //   this.getClients()
    // },
    // // 每页显示条数变化
    // sizeChange(val) {
    //   this.currentPage = 1
    //   this.obj._limit = val
    //   this.obj._start = 0
    //   this.getClients()
    // },
    // 分页点击
    currentChang(page, oldPage) {
      // 计算 _start 改变请求响应的数据
      this.obj._start = (page - oldPage) * this.obj._limit + this.obj._start
      this.getClients()
    },
    // 每页显示条数变化
    sizeChang(val) {
      // 改变每页显示的数量
      this.obj._limit = val
      // 数据从第一条开始显示
      this.obj._start = 0
      this.getClients()
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
   padding: 20px;
  }
  &-text {
    font-size: 30px;
    // line-height: 46px;
  }

}
::v-deep .img{
  max-height: 200px;
  width: 190px;
}
</style>
